<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :data="crud.data"
      row-key="id"
    >
      <el-table-column align="center" :label="'用户推广会员中使用App登录用户数量占比'">
        <el-table-column prop="userCount" label="用户数量" align="center" />
        <el-table-column prop="appLoginCount" label="用户登录App总数" align="center" />
        <el-table-column prop="percent" label="登录用户占比" align="center" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import CRUD, { crud, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import moment from 'moment'
export default {
  name: 'AllAppOverview',
  components: { crudOperation, rrOperation },
  cruds() {
    return CRUD({ title: 'App用户登录数量情况', url: 'api/statistics/allAppLoginOverview' })
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      permission: {
        download: ['admin'],
        add: ['admin', 'statistics:add'],
        edit: ['admin', 'statistics:edit'],
        del: ['admin', 'statistics:del']
      },
      createTime: []
    }
  },
  watch: {
    createTime(value) {
      this.query.createTime = value
      this.crud.refresh()
    }
  },
  mounted() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: true,
      doExport: () => {
        this.exportData()
      }
    }
    const moment1 = moment()
    this.query.createTime = [moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 365)).format('yyyy-MM-DD') + ' 00:00:00', moment1.format('yyyy-MM-DD') + ' 23:59:59']
    this.createTime = this.query.createTime
    this.crud.refresh()
  },
  methods: {
    // 导出功能
    exportData() {
      const excelName = `${this.query.createTime[0].split(' ')[0]}至${this.query.createTime[this.query.createTime.length - 1].split(' ')[0]}App用户登录数量情况` + '.xlsx'
      var xlsxParam = { raw: true }// 转换成excel时，使用原始的格式
      // 克隆节点
      console.log(this.$refs.table)
      const table = this.$refs.table.$el.cloneNode(true)
      // 判断是否为固定列，解决（为固定列时，会重复生成表格）
      const table_sheet1 = this.$XLSX.utils.table_to_sheet(table, xlsxParam)
      const wb = this.$XLSX.utils.book_new()
      this.$XLSX.utils.book_append_sheet(wb, table_sheet1, 'App用户登录数量情况')
      var table_write = this.$XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          excelName
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
